<template>
  <div class="itemBox" style="padding: 16px 16px 60px">
    <van-row>
      <van-col :class="index%2?'right':'left'" span="12" v-for="(item,index) in itemList" :key="index">
        <div class="item">
          <img class="itemImg" @click="viewImages(item.photoUrls,0)" :src="item.photoUrls[0]" alt=""
               style="cursor:pointer;">
          <div class="itemTxt">{{ item.content }}</div>
          <!--      活动三显示-->
          <div class="kids_flag" v-if="item.classification && item.classification==2">
            <img src="../../../assets/image/childKids.png" alt="">
          </div>
          <div class="itemFoot">
            <div class="userInfo">
              <img class="userImg" src="../../../assets/image/userImg.jpg">
              <div class="userName">{{ item.nickName }}</div>
            </div>

            <div class="otherInfo">
              <img style="height: 0.53rem" class="shareStatus" src="../../../assets/image/deleteItem.png"
                   @click="deleteItem(item.id)" v-show="currentUserName===item.createBy">
              <img v-if="item.like" class="shareStatus" src="../../../assets/image/goodRed.png" alt=""
                   @click="itemGood(item.id,item.like)">
              <img v-else class="shareStatus" src="../../../assets/image/goodNull.png" alt=""
                   @click="itemGood(item.id,item.like)">
              <span class="itemGoodNum">
              {{ item.totalLikeCount }}
          </span>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
    <!--删除操作框-->
    <van-dialog class="prizeResultModal" v-model="deleteSuccdShow" style="background-color: transparent">
      <img style="width: 100%" src="@/assets/image/deleteBg.png">
      <div class="operationFoot">
        <img src="../../../assets/image/noDelete.png" alt="" @click="noDelete">
        <img src="../../../assets/image/yesDelete.png" alt="" @click="yesDelete">
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {getdeleteItemUrl, getGoodListUrl} from "@/api/list";
import {Notify, ImagePreview} from "vant";

export default {
  name: "item",
  props: {
    itemList: {
      type: Array,
      default: () => {
      }
    }
  },
  data() {
    return {
      images: [],
      deleteSuccdShow: false,
      deleteId: "",
      startLike: false,
    };
  },
  mounted() {
    this.$forceUpdate();
    this.currentUserName = localStorage.getItem("username");

  },
  methods: {
    //删除
    deleteItem(id) {
      if (id) {
        this.deleteSuccdShow = true;
        this.deleteId = id;
      }

    },
    yesDelete() {
      let params = {
        id: this.deleteId
      };
      getdeleteItemUrl(params).then(res => {
        if (res.code == 200) {
          this.deleteSuccdShow = false;
          this.$emit("refresh", {type: 'delete', content: params.id});
        }
      });
    },
    noDelete() {
      this.deleteId = "";
      this.deleteSuccdShow = false;

    },
    itemGood(id, isGood) {
      this.clickAudio();
      if (isGood) {
        isGood = false;
      } else {
        isGood = true;
      }
      let params = {
        id: id,
        like: isGood,
        type: this.$route.query.type
      };
      getGoodListUrl(params).then(res => {
        if (res.code == 200) {
          for (let i = 0; i < this.itemList.length; i++) {
            if (this.itemList[i].id == id) {
              if (!isGood) {
                this.$set(this.itemList[i], "like", false);//改成数字类型就不用了加引号
                this.$set(this.itemList[i], "totalLikeCount", this.itemList[i].totalLikeCount - 1);
              } else {
                this.$set(this.itemList[i], "like", true);
                this.$set(this.itemList[i], "totalLikeCount", this.itemList[i].totalLikeCount + 1);
              }
            }
          }
          // Notify({ type: "success", message: res.message });
          // this.$emit("refresh", "111");
        }
      });
    },
    viewImages(urls, index) {

      this.clickAudio();
      if (urls && urls.length) {
        ImagePreview({
          images: urls,
          startPosition: index
        });
      }
    }, getRealTime(time) {
      let realTime = time.replace(/-/g, '/')
      return new Date(realTime).getTime();
    }
  }
};
</script>

<style scoped lang="scss">
.itemBox {
  background-color: #ffffff;
  //padding: 0 16px 60px;
  //width: 100%;
  height: auto;
  margin: 0 auto;
  visibility: visible;
  //display: flex;
  //flex-wrap: wrap;
  .item {
    //width: calc(50vw - 24px);
    //border-radius: 10px;
    padding-bottom: 0.5rem;
    position: relative;

    .labelBox {
      position: absolute;
      top: -20px;
      right: 0;
      background-color: #181818;
      border-radius: 20px;
      padding: 0 8px;
      font-size: 12px;
      line-height: 20px;
      color: #C0DF17;
      display: inline-block;
    }

    .kids_flag {
      position: relative;

      img {
        position: absolute;
        height: 0.5rem;
        right: 0;
        top: -20px;
      }
    }

    .itemImg {
      background-color: #ffffff;
      position: relative;
      background-size: cover;
      width: 100%;
      height: 6.9rem;
      background-position: 50%;
      object-fit: cover;
    }

    .itemTxt {
      font-size: 0.4375rem;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 1.875rem;
    }

    .itemFoot {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .userInfo {
        display: flex;
        align-items: center;

        .userImg {
          width: 0.8rem;
          border-radius: 50%;
        }

        .userName {
          font-size: 0.375rem;
        }
      }

      .deleteItem {
        margin-right: 10px;

        img {
          width: 0.5rem
        }
      }

      .otherInfo {
        display: flex;
        align-items: center;

        .shareStatus {
          width: 0.53rem;
          margin-right: 6px;;
        }

        .itemGoodNum {
          font-size: 0.53rem;
        }
      }
    }
  }

  .left {
    padding-right: 0.25rem;
  }

  .right {
    padding-left: 0.25rem;
  }

  .prizeResultModal {
    //position: relative;
    .operationFoot {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: 70%;

      display: flex;
      justify-content: space-between;
      margin: auto;

      img {
        display: block;
        height: 100%;
      }
    }
  }
}
</style>
